<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="template.xhtml">
	<ui:define name="content">
		<h:form id="servicesForm">
			<p:panel id="servicesPanel" header="Services">
				<p:dataTable var="service" value="#{services.servicesList}">
					<p:column headerText="Id" style="width:3%">
						<h:outputText value="#{service.serviceId}"></h:outputText>
					</p:column>
					<p:column headerText="Type" style="width:10%">
						<h:outputText value="#{service.type}"></h:outputText>
					</p:column>
					<p:column headerText="Subtype" style="width:10%">
						<h:outputText value="#{service.subType}"></h:outputText>
					</p:column>
					<p:column headerText="URL" style="width:500px">
							<p:inputText value="#{service.url}" size="100" />
					</p:column>
					<p:column headerText="Option" style="text-align: center; width:3%">
						<p:commandButton id="deleteButton" process="@this"
							action="#{services.deleteService}" icon="ui-icon-close"
							title="Delete" update=":servicesForm:servicesPanel"
							style="center">
							<f:setPropertyActionListener value="#{service}"
								target="#{services.selectedService}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</p:panel>
		</h:form>
		<h:form id="buttonForm">
			<p:panel id="addService" header="Add service">
				<p:panelGrid columns="2">
					<h:outputLabel for="serviceId" value="ServiceId: " />
					<p:inputText id="serviceId"
						value="#{services.newService.serviceId}" size="40" />
					<h:outputLabel for="serviceType" value="Service type: " />
					<p:inputText id="serviceType" value="#{services.newService.type}"
						size="40" />
					<h:outputLabel for="serviceSubType" value="Service subtype: " />
					<p:inputText id="serviceSubType"
						value="#{services.newService.subType}" size="40" />
					<h:outputLabel for="serviceUrl" value="Service URL: " />
					<p:inputText id="serviceUrl" value="#{services.newService.url}"
						size="40" />
				</p:panelGrid>
				<br />
				<p:commandButton value="Add" actionListener="#{services.add}"
					update=":servicesForm:servicesPanel,:buttonForm:addService" />
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>
</html>